<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{ obj.blog.blog_title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    {% include 'public_css.html' %}

    <style>
        .leftbar {
            background-color: #3D4F5D;
        }

        pre {
            font-family: "微软雅黑";
        }

        .textarea_100 {
            width: 100%;
        }
    </style>
</head>

<body style="background-color:#ADADAD;">

<!-- 按钮触发器， 需要指定 target -->
<div class="am-offcanvas" id="left_bar">


    <div class="am-offcanvas-bar" id="left_bar">
        <div class="am-offcanvas-content">
            {% include 'leftbar.html' %}
        </div>
    </div>
</div>


<div class="am-g" style="float:right;">

    <div data-am-sticky>
        <!-- header -->
        <div data-am-sticky align="center">
            <header class="am-topbar" style="background-color:gray;">

                <div class="am-topbar-left am-u-sm-1 am-u-md-1">
                    <a class="am-btn am-btn-sm am-btn-warning am-topbar-btn" href="#"
                       data-am-offcanvas="{target: '#left_bar', effect: 'push'}">
                        <font color="#FFFFFF"> <span class="am-icon-bars"></span></font>
                    </a>
                </div>
                <div class="am-topbar-left am-u-sm-10" style="float: right;margin-right: 5%;padding-top: 5px">
                    <a href="javascript:void(0)" onclick="location.reload()"><font size="5"
                                                                                   color="white">{{ obj.blog.blog_author.username }}的博客</font>
                    </a></div>
            </header>
        </div>
    </div>


    <div class="am-panel-group am-u-sm-12">

        <!--Main-->
        <h1 align="center"><b>{{ obj.blog.blog_title }}</b></h1>
        {% if obj.blog.blog_pic_url %}
            <div>
                <img width="300" src="{{ obj.blog.blog_pic_url }}">
            </div>
        {% endif %}
        <div align="center"><b>原作者：</b><a href="/my_blog/user_info/{{ obj.blog.blog_author.pk }}/"><span style="color: #ff6600;">{{ obj.blog.blog_author.username }}</span></a></div>

        {% if obj.blog.blog_tags %}
            <p><i class="am-icon-tags"></i>标签: <a
                    onclick="jumpToTag('{{ blogobj.blog_tags }}')">{{ obj.blog.blog_tags }}</a></p>
        {% endif %}
        <h2 style="color: #ff6600;">正文</h2>
        <hr>
        <div class="am-g" style="background-color:white;border:20px solid white;">
            {% if obj.blog.blog_content %}
                <font face="微软雅黑" size="4">
                    {{ obj.blog.blog_content|safe }}
                </font>
            {% else %}
                无内容。。。
            {% endif %}
        </div>
        <hr class="am-g">
        <!--script:find article list by tags -->
        <script type="text/javascript">
            function jumpToTag(tag) {
                switch (tag) {
                    case "网络营销":
                        location.href = "/sharer_blog/?type=network_marketing/";
                        break;
                    case "广告文案":
                        location.href = "/sharer_blog/?type=advertising_copy/";
                        break;
                    case "热点解读":
                        location.href = "/sharer_blog/?type=hot_interpretation/";
                        break;
                    default:
                        alert("站内无此分类");
                        //location.href="/sharerblogs/";
                        break;
                }
            }
        </script>

        <!--main end-->

    </div>


    <div class="am-g">

        <article class="am-comment  am-comment-success am-u-md-10"
                 style="background-color:white;border:20px solid white">

            <!--blog_footer-->
            <footer id="article_footer" class="am-comment-footer" align="center">
                <div class="am-comment-actions">
                    <a href="#comment_content"><i
                            class="am-icon-comments"></i>({{ obj.blog.comment_list.all.count }})</a>
                    <a href="./praise"><i class="am-icon-thumbs-o-up"></i>({{ obj.blog.praise_count }})</a>
                    <a href="#article_footer"><i class="am-icon-eye"></i>({{ obj.blog.scan_count }})</a>
                </div>
            </footer>

            <!--footer end-->
            <hr class="am-g">

            <!-- comment_list -->
            <div>
                {% for comment in comment_list %}
                    <a href="#link-to-user-home">
                        {% if comment.comment_headimg_url %}
                            <img src="{{ comment.headimg_url }}" alt="" class="am-comment-avatar" width="48"
                                 height="48"/>
                        {% else %}
                            <img src="/static/myblogs/blogimg_default.png" alt="" class="am-comment-avatar" width="48"
                                 height="48"/>
                        {% endif %}
                    </a>

                    <div class="am-comment-main" id="comment_div_{{ comment.id }}">
                        <header class="am-comment-hd">
                            <!--<h3 class="am-comment-title">评论标题</h3>-->
                            <div class="am-comment-meta">
                                {% ifequal comment.from_user None %}
                                    <a href="#link-to-user-home" class="am-comment-author">
                                        匿名用户
                                    </a>
                                {% else %}
                                    <a href="/my_blog/?user={{ comment.from_user_id }}" class="am-comment-author">
                                        {{ comment.from_user }}
                                    </a>
                                {% endifequal %}
                                评论于
                                <time>{{ comment.createTime }}</time>
                            </div>
                        </header>

                        <div class="am-comment-bd">
                            {{ comment.content }}
                        </div>
                    </div>
                    </br>
                {% endfor %}

            </div>
            <!--My comments-->
            </br>

            <a href="#link-to-user-home">
                {% if obj.login %}
                    <img src="{{ obj.session.head_img_url }}" alt="" class="am-comment-avatar" width="48" height="48"/>
                {% else %}
                    <img src="/static/myblogs/blogimg_default.png" alt="" class="am-comment-avatar" width="48"
                         height="48"/>
                {% endif %}
            </a>

            <div class="am-comment-main">
                <header class="am-comment-hd">
                    <!--<h3 class="am-comment-title">评论标题</h3>-->
                    <div class="am-comment-meta">
                        <a href="#link-to-user" class="am-comment-author">我</a>
                        也来评论
                    </div>
                </header>

                <div class="am-comment-bd">
                    <div class="am-u-md-12">
                        <form name="comment_form" id="comment_form" method="POST" action="./comment/">
                            <div class="am-g">
                                <textarea class="textarea_100" name="comment_content" id="comment_content" rows="4"
                                          placeholder="最多250字"></textarea>
                            </div>
                            <ul class="am-nav">
                                <li>
                                    <div id="tip" name="tip"></div>
                                </li>
                                <li><a class="am-btn am-btn-warning am-u-md-2" href="javascript:submitForm();">评论</a>
                                </li>
                            </ul>
                            {% csrf_token %}
                        </form>
                    </div>

                    <script>
                        function submitForm() {
                            if ($("#comment_content").val() == "") {
                                $("#tip").html("<font color='red'>不能为空！</font>");
                                return;
                            }
                            $("#comment_form").submit();

                        }
                    </script>

                </div>
            </div>


            <!--My comments end-->
        </article>
    </div>

    </br>

</div>


{% include 'public_footer.html' %}

</body>
{% include 'public_js.html' %}
</html>